<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户使用信息</title>
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
 <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
	<!--引入Jquery主文件-->
	<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
	<!--引入JqueryEasyUI主文件-->
	<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
	<!--让easyUI支持中文-->
	<script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<table  class="easyui-datagrid" id="dg"
		data-options="url:'${pageContext.request.contextPath}/pages/user/queryAll.do',
	fitColumns:true,
	 fit:true,
	collapsible:true,
	toolbar:'#tb',
	rownumbers:true,
	showFooter:true,
	pagination:true,
    pageList : [ 5,10,15,20 ],
	pageSize : 10, 
	checkOnSelect : true,
	selectOnCheck : true,
	">
		<thead>
			<tr>
				<th data-options="field:'ck',checkbox:true"></th>
				<th hidden="hidden" data-options="field:'userId',resizable:false"
					width="5%">编号</th>
				<th data-options="field:'userName',resizable:false" width="10%">持有人</th>
				<th data-options="field:'userCode',resizable:false" width="10%">账号</th>
				<th data-options="field:'userPwd',resizable:false" width="10%">密码</th>
				<th data-options="field:'userRole',resizable:false" width="10%">角色</th>
				<th data-options="field	:'userPermission',resizable:false"
					width="10%">权限</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="height: auto;">
		<div>
			
			<a href="javascript:void(0)" class="easyui-linkbutton"
				data-options="iconCls:'icon-add',plain:true" onclick="addUser()">添加用户</a>
			
			<a href="javascript:void(0)" class="easyui-linkbutton"
				data-options="iconCls:'icon-edit',plain:true" onclick="updUser()">修改用户</a>
			<a href="#" class="easyui-linkbutton"
			    data-options="iconCls:'icon-undo',plain:true" onclick="unselect()"> 取消选中</a> 
			    <a href="javascript:void(0)" class="easyui-linkbutton"
				data-options="iconCls:'icon-cancel',plain:true"
				onclick="deleteUser()">删除用户</a>
				<input class="easyui-searchbox" data-options="prompt:'请输入搜索信息',searcher:selectUser" style="width:200px" /> 
		</div>

		<div id="dlg" class="easyui-dialog"
			style="width:320px;height:300px;background:#FFCE42"
			data-options="buttons:'#btns',closed:true">
			<form id="fm" method="post">
				<table>
					<tr>
						<td hidden="hidden"><b>编&nbsp;号</b>:<input type="text"
							name="userId" /></td>
					</tr>
					<tr>
						<td><b>持有人</b>:<input type="text" name="userName"
							onclick="JavaScript:this.value=''" /></td>
					</tr>
					<tr>
						<td><b>账&nbsp;号</b>:<input type="text" name="userCode"
							onclick="JavaScript:this.value=''" /></td>
					</tr>
					<tr>
						<td><b>密&nbsp;码</b>:<input type="text" name="userPwd"
							onclick="JavaScript:this.value=''" /></td>
					</tr>
					<tr>
						<td><b>角&nbsp;色</b>:<select name="userRole" value='--请选择--'>
								<option>业务员</option>
								<option>客服</option>
								<option>财务</option>
								<option>管理员</option>
						</select></td>
					</tr>
					<tr>
						<td><b>权&nbsp;限</b>:
							<label><input name="p" type="checkbox" value="1" />1 </label> 
							<label><input name="p" type="checkbox" value="2" />2 </label> 
							<label><input name="p" type="checkbox" value="3" />3 </label> 
							<label><input name="p" type="checkbox" value="4" />4 </label>
							</td>
					</tr>
				</table>
			</form>
		</div>
		<div id="btns">
			<a href="#" class="easyui-linkbutton" onclick="saveUser()">保存</a> <a
				href="#" class="easyui-linkbutton"
				onclick="javascript:$('#dlg').dialog({closed:true})">取消</a>
		</div>
		<div id="mm" style="width:60px;"></div>
	</div>
</body>
<script type="text/javascript">
	var url;
	function selectUser(value){
		var options = $("#dg").datagrid("getPager" ).data("pagination" ).options;  
		var page = options.pageNumber;
		var rows = options.pageSize;
	  	//利用ajax,来获取后台查询数据
			$.post("${pageContext.request.contextPath}/pages/user/queryAll.do","page="+page+"&pageSize="+rows+"&keyWord="+value,function(data){
			//msg可以是AJAX返回的数据也可以自定义的JSON格式的字符串
			$('#dg').datagrid('loadData', JSON.parse(data));
		},"text");
	}
	function addUser() {
		$("#dlg").dialog({
			closed : false
		}).dialog('setTitle', '新增用户');
		$("#fm").form('clear');
		$("[name='userId']").val(99999);
		url = "${pageContext.request.contextPath}/pages/user/addUser.do";
	}
	function saveUser() {
		$('#fm').form('submit', {
			url : url,
			onSubmit : function() {
				//表单验证  
			},
			success : function(data) {
				var data = eval("(" + data + ")");
				if (data.result) {
					$('#dlg').dialog({
						closed : true
					});
					$("#dg").datagrid("reload");
				}
			}
		});
	}
	function updUser() {
		var row = $("#dg").datagrid("getSelected");
		if (row) {
			$("#dlg").dialog({
				closed : false
			}).dialog('setTitle', '修改用户信息');
			$("#fm").form("load", row);
			url = "${pageContext.request.contextPath}/pages/user/updUser.do";
		}

	}
	function deleteUser() {
		var rows = $("#dg").datagrid("getSelections");
		if (rows.length > 0) {
			var ids = [];
			for (var i = 0; i < rows.length; i++) {
				//获取自定义table 的中的checkbox值  
				var id = rows[i].userId; //OTRECORDID这个是你要在列表中取的单个id   
				ids.push(id); //然后把单个id循环放到ids的数组中  
			}
			$.messager.confirm('确认', '您确认想要删除记录吗？', function(r) {
				if (r) {
					$.post('${pageContext.request.contextPath}/pages/user/delUser.do', {
						"array[]" : ids
					}, function(data) {
						//alert(data);
						if (data.result) {
							$("#dg").datagrid("reload");
						} else {

						}

					}, "json");
				}
			});
		}
	}
	function unselect() {
		$("#dg").datagrid("clearSelections");
		$("#dg").datagrid("unselectAll");
	}
</script>
</html>
